import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import './index.scss'

/**
 * 底部导航栏组件
 * 功能：提供应用的主要导航功能，包含首页、视频等标签页
 */
function Tabbar() {
    const navigate = useNavigate() // 路由导航函数
    const { pathname } = useLocation() // 获取当前路径
    
    // 计算当前激活的标签页key
    const activeKey = pathname === '/' ? '/home3' : '/' + pathname.split('/')[1]
    
    /**
     * 处理浮动按钮点击事件
     * 根据当前页面决定跳转到发布病友圈或病友圈列表
     */
    const handlisk = () => {
        if(activeKey === '/byq' || activeKey === '/byqxq'){
            navigate('/fbbyq') // 跳转到发布病友圈页面
            return 
        }
        navigate('/byq') // 跳转到病友圈列表页面
    }
    
    // 标签页配置数组
    const tab = [
        {
            key: "/home3", // 首页
            title: '',
            icon: <img className='tab-icon' src={'/22.png'} />,
            activeIcon: <img className='tab-icon' src={'/22.png'} />
        },
        {
            key: '/sp', // 视频页面
            title: '',
            icon: <img className='tab-icon' src={'/23.png'} />,
            activeIcon: <img className='tab-icon' src={'/23.png'} />
        },
    ]
    
    return (
        <div>
            {/* 浮动操作按钮 */}
            <div className='tab-fab'>
                <img 
                    className='tab-fab-icon'  
                    src={activeKey === '/byq' || activeKey === '/byqxq' ? '/21.png' : '/24.png'}  
                    onClick={handlisk}
                />
            </div>
            
            {/* 底部标签栏 */}
            <TabBar activeKey={activeKey} onChange={(key) => navigate(key)} className='tab'> 
                {tab.map(item => (
                    <TabBar.Item 
                        key={item.key}
                        title={item.title}
                        icon={(active) => active ? item.activeIcon : item.icon}
                    />
                ))}
            </TabBar>
        </div>
    )
}

export default Tabbar